Create React Appで作成したReactアプリにReact Native for Webを導入する

Create React Appは、コマンド１つでReactアプリケーションの雛形を作成することができる、Facebook製の環境構築ツールです。新しくアプリを作成する際に使用されている方も多いのではないかと思います。

React Native for Webは、iOS/Androidアプリ作成向けのライブラリであるReact Nativeと同じ名称のコンポーネントを使ってWebアプリケーションの画面を作成することができるライブラリです。使用していてReactに比べてより効率的に画面の作成ができると感じています。

当記事ではCreate React Appを使用して作成したReactアプリにReact Native for Webを導入する方法についてご紹介します。

Create React Appを使ってアプリを作成する

以下のコマンドを実行します。今回はTypeScriptを導入したいため、--typescriptオプションをつけました。

$ npx create-react-app sample-app --typescript

コマンドラインにHappy hacking!と表示されたら、以下のコマンドを実行してアプリが起動できるか確認してみましょう。

$ cd sample-app
$ yarn start

ブラウザで画面が表示がされたらアプリの作成は終了です。この時点でgitにはInitialize project using Create React Appと自動でcommitがされていると思います。

React Native for Webを導入するための準備をする

React Native for Webを導入する前に、不要なファイルの削除などプロジェクトの整理を行いましょう。

まず、srcディレクトリ内のファイルを整理します。
React Native for Webではcssファイルは不要となるため、以下のファイルを削除しました。

• App.css
• index.css

また、今回は使用しないため、以下のファイルも削除しました。

• logo.svg
• serviceWorker.ts

続いて、App.tsx、index.tsxを以下のように変更しました。

create-react-appコマンドを使用してアプリを作成すると、Class Componentではなく、Functional Componentでコンポーネントが作成されます。

App.tsx

import React from "react";

function App() {
  return <p>Hello React!!!</p>;
}

export default App;

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

再度、yarn startを実行し、ブラウザにHello React!!!と表示されるのを確認します。

これでReact Native for Webを導入する準備が整いました。

React Native for Webを導入する

以下のコマンドを実行し、React Native for Webを導入します。

$ yarn add react-native-web

また、今回はTypeScriptを導入しているため、React Nativeの型定義ファイルを取り込みます。

$ yarn add @types/react-native

実行が完了したらpackage.jsonを開いてreact-native-webと@types/react-nativeが追加されていることを確認しましょう。確認ができたらReact Native for Webの導入は完了です。

React Native for Webコンポーネントを実装する

最後に、導入したReact Native for Webコンポーネントが使えるかどうか、簡単に試してみます。

App.tsxを以下のように変更します。React Native for WebのViewコンポーネントとTextコンポーネントが使えるかどうかを確認します。

App.tsx

import React from "react";
import { View, Text } from "react-native";

function App() {
  return (
    <View>
      <Text>Hello React Native for Web!</Text>
    </View>
  );
}

export default App;

yarn startを実行し、ブラウザにHello React Native for Web! と表示されれば成功です!

最後に、ブラウザタブの表示名がReact Appとなってしまっているので、pubic/index.htmlを変更しましょう。

<title>React Native for Web App</title>

まとめ

React Native for Webには今回試したViewコンポーネント、Textコンポーネント以外に、様々なコンポーネントが用意されています。

ぜひ公式ドキュメントやReact NativeのAPIリファレンスを参照しながら、色々なコンポーネントを使って画面作成を試していただけたらと思います。